<template>
  <div class="footerBar">
    <van-dialog v-model="itemBool" title="标题" show-cancel-button>
      <div class="itemList" v-for="(v,i) in itemList" :key="i">{{v.name}}</div>
      <div @click="newItem">新建分组</div>
    </van-dialog>
    <van-dialog v-model="newItemBool" title="标题" show-cancel-button>
      <van-field v-model="value" label="文本" placeholder="请输入用户名" />
      <van-button type="primary" @click="addItem(value)">确定</van-button>
    </van-dialog>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="friends-o" @click="addToItem">添加到分组</van-tabbar-item>
      <van-tabbar-item icon="setting-o" @click="deleteBook">移除书架</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      itemBool: false,
      newItemBool: false,
      value: null
    };
  },
  props: ["checkList"],
  watch: {
    checkList() {}
  },
  computed: {
    itemList() {
      return this.$store.state.itemList;
    }
  },
  methods: {
    addToItem() {
      // 添加到分组
      this.itemBool = true;
    },
    deleteBook() {
      this.checkList.forEach((v, i) => {
        this.$store.commit("delBookList", v.id);
      });
    },
    newItem() {
      this.itemBool = false;
      this.newItemBool = true;
    },
    addItem(val) {
      this.$store.commit("addItem", {
        name: val,
        itemId: new Date().getTime(),
        list: this.checkList
      });
      this.deleteBook()
    }
  }
};
</script>

<style>
.footerBar {
  z-index: 9;
}
</style>